<template>
  <div class="done">
    <div class="main">
      <h2 class="title">已经完成</h2>
      <div class="demo">
        <span class="doneCount">{{ doneList.length }}</span>
      </div>
    </div>
    <div class="doneList">
      <transition-group name="fade">
        <div class="doneItem" v-for="item in doneList" :key="item.id">
          <input
            @click.prevent="checkIt(item.id)"
            :data-id="item.id"
            class="choose"
            type="checkbox"
            checked="checked"
          />
          <div class="content">{{ item.content }}</div>
          <div class="del" @click="deleteIt(item.id)">删除</div>
        </div>
      </transition-group>
    </div>
  </div>
</template>

<script>
export default {
  props: ["doneList"],
  data() {
    return {};
  },
  methods: {
    checkIt(id) {
      this.$bus.$emit("checkDone", id);
    },
    deleteIt(id) {
      this.$bus.$emit("deleteItem", id);
    },
  },
};
</script>

<style>
</style>